<!-- key bind -->
<template>
  <div class="container">
    <u-form :model="form" ref="uForm">
      <u-form-item label="市场" label-width="150rpx" :label-style="labelStyle"
        ><u-input
          v-model="form.market"
          type="select"
          @click="showMarket = true"
          :custom-style="fieldStyle"
      /></u-form-item>
      <u-action-sheet
        :list="marketList"
        v-model="showMarket"
        @click="marketCallback"
      ></u-action-sheet>

      <u-form-item
        label="AccessKey"
        label-width="150rpx"
        :label-style="labelStyle"
        ><u-input v-model="form.accessKey" :custom-style="fieldStyle"
      /></u-form-item>
      <u-form-item
        label="SecretKey"
        label-width="150rpx"
        :label-style="labelStyle"
        ><u-input v-model="form.secretKey"
      /></u-form-item>
    </u-form>

    <view class="u-btn">
      <u-button @click="submit" type="warning" shape="square" size="mini"
        >绑定连接</u-button
      >
      <u-button
        @click="open"
        type="error"
        shape="square"
        size="mini"
        
        >删除API</u-button
      >
      <u-button @click="update" type="success" shape="square" size="mini"
        >更新币种</u-button
      >
    </view>
    <u-modal v-model="show" :content="content" show-cancel-button @confirm="confirm" @cancel="cancel"></u-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 确认删除
      show: false,
      content: "确认没有策略在执行",
      // input 样式
      fieldStyle: {
        width: "300rpx",
        height: "80rpx",
        padding: "0",
        // border:"1px solid red",
        color: "aliceblue",
      },
      form: {
        market: "",
        accessKey: "",
        secretKey: "",
      },
      showMarket: false,
      marketList: [{ text: "Huobi合约" }, { text: "Binance合约" }],
      market: "",
      // form-item label 样式
      labelStyle: {
        color: "aliceblue",
      },
    };
  },

  components: {},

  computed: {},

  methods: {
    marketCallback(index) {
      this.form.market = this.marketList[index].text;
    },
    submit(){

    },
    update(){

    },
    // 删除模态框
    open() {
      this.show = true;
    },
    confirm() {
      console.log('confirm')
    },
    cancel() {
      console.log('cancel')
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
  min-height: 100vh;
  padding: 20rpx;
  background-color: #101334;
  font-size: 24rpx;
  .u-btn {
    margin-top: 40rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
</style>